<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>所有用户</title>
    <!--    element-ui导入-->
    <link rel="stylesheet" href="./js/element-ui/lib/theme-chalk/index.css">

    <script src="js/vue.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
    <script src="./js/element-ui/lib/index.js"></script>
</head>
<body>
<div id="div">

    <el-row :gutter="15">
        <el-form ref="myForm" :model="myForm" :rules="rules" size="small" label-width="100px">
            <el-col :span="8">
                <el-form-item label="买入价格" prop="buy">
                    <el-input v-model="myForm.buy" placeholder="请输入单行文本买入价格" clearable :style="{width: '100%'}">
                        <template slot="append">U</template>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="卖出价格" prop="sell">
                    <el-input v-model="myForm.sell" placeholder="请输入卖出价格" clearable :style="{width: '100%'}">
                        <template slot="append">U</template>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="手续费" prop="fee">
                    <el-input v-model="myForm.fee" placeholder="请输入手续费" clearable :style="{width: '100%'}">
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-input
                        placeholder="收益率"
                        v-model="input"
                        :disabled="true">
                    <template slot="prepend">收益率是</template>
                    <template slot="append">%</template>
                </el-input>
                <el-input
                        v-model="input2"
                        :disabled="true">
                    <template slot="prepend">买卖一次你能赚</template>
                    <template slot="append">U</template>
                </el-input>
            </el-col>
            <el-col :span="8">
                <el-form-item label-width="0" prop="field104">
                    <el-button @click="submitForm" type="primary" icon="el-icon-search" size="medium"> 主要按钮 </el-button>
                </el-form-item>
            </el-col>


        </el-form>
    </el-row>


    <el-image
            style="width: 700px; height: 600px"
            src="./pic/1.png"
            :preview-src-list="srcList">
    </el-image>
</div>
</body>
<script>

    new Vue({
        el: "#div",
        data: {
            input:0,
            input2:0,
            myForm: {
                buy: 10,
                sell: 15,
                fee: 0,
            },
            rules: {
                buy: [{
                    required: true,
                    message: '请输入单行文本买入价格',
                    trigger: 'blur'
                }],
                sell: [{
                    required: true,
                    message: '请输入卖出价格',
                    trigger: 'blur'
                }],
                fee: [{
                    required: true,
                    message: '请输入手续费',
                    trigger: 'blur'
                }],
            },
        },
        methods: {
            submitForm() {
                this.$refs['myForm'].validate(valid => {
                    if (!valid) return
                        let buy = this.myForm.buy
                        let sell = this.myForm.sell
                        let fee = (this.myForm.fee)/100
                    let one = sell*(1-fee)
                    let two = buy/(1-fee)
                    let three = one-two
                    let money = three/two
                    this.input=money*100

                    this.input2=buy-(buy-(buy*money))
                    // TODO 提交表单
                })
            },
        }

    })
</script>
</html>